
$(function () {
  var currentPage = 1;
  var pageSize = 3;

  // 1-渲染页面
  function render() {
    $.ajax({
      type: "get",
      url: "/product/queryProductDetailList",
      data: {
        page: currentPage,
        pageSize: pageSize
      },
      dataType: "json",
      success: function (res) {
        $("tbody").html(template("tmp", res));
        setPage(res.total);
      }
    })

  }

  render();

  // 2-分页功能实现
  function setPage(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage,//当前页
      totalPages: Math.ceil(total / pageSize),//总页数
      size: "small",//设置控件的大小，mini, small, normal,large
      onPageClicked: function (event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        currentPage = page;
        render();
      }
    });
  }

  // 3-渲染下拉列表
  //  准备模板，取数据，将数据放到模板里，渲染到页面
  $("#add-product").click(function () {
    $.ajax({
      type: "get",
      url: "/category/querySecondCategoryPaging",
      data: {
        page: currentPage,
        pageSize: 100
      },
      dataType: "json",
      success: function (res) {
        //  console.log(res);
        $(".dropdown-list").html(template("list", res));
      }
    })
  });
  // 4-点击下拉列表选项，将内容填充到选择框里
  // 注意：下拉列表是动态生成的 =》事件委托
  $(".dropdown-list").on("click", ".li-a", function () {
    // 将内容填充到选择框里
    $("#dropdownText").text($(this).text());
    // 将对应的二级分类的id存储到隐藏域中
    $("#brandId").val($(this).data('id'));
    // 恢复校验状态 校验成功 去掉校验失败时的样式和提示
    $('#add-form').data('bootstrapValidator').updateStatus('brandId','VALID');
  });
  // 6-图片上传功能
  // 注意点：这里必选上传3张图片 => 图片地址和名字有三个 => 数组存储
  //记录上传的图片
  var picAdd = [];
  $("#fileupload").fileupload({
    dataType: "json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done: function (e, data) {
      console.log(data.result);
      // 定义一个空数组接收data.result.picAddr
      var img = data.result;
      picAdd.unshift(img);
      // 上传多个文件的本质：一次上传一个，传多次
      // 将每次上传的文件放在前面
      //  将获取到的图片地址传给img的src，依次在图片展示的盒子中预览出来
      // 最新添加的放在最前面
      $(".img-box").prepend($("<img src=" + data.result.picAddr + ">"));
      // 如果传的图片>3张，去掉最先传的一张
      if (picAdd.length > 3) {
        // 删除最后一张
        picAdd.pop();
        console.log(picAdd.length);
        // 图片预览盒子同步删除最后一张图片
        $(".img-box img:last-child").remove();
      }
      // 把选中的图片的地址赋值给隐藏域 （图片必须满三张）
      if (picAdd.length == 3) {
        // console.log(1);
        // 因为表单只能存储字符串类型的值 => 将对象转换为json字符串
        $('#picArr').val(JSON.stringify(picAdd));
        // console.log($("#picArr").val());
        // // 2- 图片够3张后， 恢复图片的校验状态 
        $('#add-form').data('bootstrapValidator').updateStatus('picArr','VALID');
      }
    }
  });

  // 5-添加表单校验  指定字段的校验
  // 7-完善表单校验
  $("#add-form").bootstrapValidator({
    excluded: [':disabled'],
    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    //3. 指定校验字段
    fields: {
      //校验二级分类，对应name表单的name属性
      brandId: {
        validators: {
          //不能为空
          notEmpty: {
            message: '请输入二级分类名称'
          }
        }
      },
      proName: {
        validators: {
          notEmpty: {
            message: "请输入商品名称"
          }
        }
      },
      proDesc: {
        validators: {
          notEmpty: {
            message: '请输入商品描述'
          }
        }
      },
      num: {
        validators: {
          notEmpty: {
            message: '请输入商品库存'
          },
          // 正则校验
          //正则校验
          regexp: {
            regexp: /^[1-9]\d*$/,  // 2
            message: '库存必须是非0开头的数字'
          }
        }
      },
      size: {
        validators: {
          notEmpty: {
            message: '请输入商品尺寸'
          },
          // 正则表达式
          regexp:{
            regexp:/^[1-9]\d*-[1-9]\d*$/,
            message:"商品尺寸的格式必须是xx-xx"
          }
        }
      },
      oldPrice: {
        validators: {
          notEmpty: {
            message: '请输入商品原价'
          },
          // 正则表达式
          regexp:{
            regexp:/^[1-9]\d*$/,
            message:'商品原价必须是不为0的数字'
          }
        }
      },
      price: {
        validators: {
          notEmpty: {
            message: '请输入商品现价'
          },
           // 正则表达式
           regexp:{
            regexp:/^[0-9]\d*$/,
            message:'商品现价必须是数字'
          }
        }
      },
      // 校验图片
      picArr: {
        validators: {
          notEmpty: {
            message: '请传入3张图片'
          }
        }
      },
    }
  });
  // 8-发送请求  触发success.form.bv校验事件
  $("#add-form").on('success.form.bv',function (e){
      e.preventDefault();
      // console.log(($("#add-form").serialize()));
      $.ajax({
        type:"post",
        url:"/product/addProduct",
        data:$("#add-form").serialize(),
        dataType:"json",
        success:function(res){
            // console.log(res);
            render();
            $("#add-modal").modal('hide');
            // 重置表单
            $("#add-form").data("bootstrapValidator").resetForm(true);
            // 手动重置二级分类名称和预览图片
            $("#dropdownText").text("请选择二级分类");
            // 将预览的图片清除
            $(".img-box").empty();
            // 记得清空picAdd数组
            picAdd=[];
        }
      })
  })

})